<template>
  <div class="main-layout">
    <div class="hud-effect"></div>
    <!-- 全屏科幻背景 -->
    <div class="sci-fi-bg">
      <div class="grid-lines"></div>
      <div class="hologram-effect"></div>
    </div>

    <el-container class="sci-fi-container">
      

      <!-- 主内容区 -->
      <el-container class="main-content">
        <!-- 未来感头部 -->
       

        <!-- 科幻风格内容区 -->
        <el-main class="hologram-main">
          <!-- 增强后的数据展示 -->
          <div class="dashboard-grid">
            <!-- 核心指标 -->
            <div class="core-metrics cyber-card">
              <div 
                v-for="(metric, index) in coreMetrics" 
                :key="index" 
                class="metric-item"
                :style="{ color: metric.color }"
              >
                <div class="metric-header">
                  <el-icon class="metric-icon">
                    <component :is="metric.icon" />
                  </el-icon>
                  <div class="title-group">
                    <div class="main-value">{{ metric.value }}</div>
                    <div class="metric-label">{{ metric.label }}</div>
                  </div>
                </div>
                <div class="trend-indicator">
                  {{ metric.trend }}
                </div>
                <div class="detail-list">
                  <div 
                    v-for="(detail, dIndex) in metric.detail" 
                    :key="dIndex" 
                    class="detail-item"
                  >
                    <span class="name">{{ detail.name }}</span>
                    <span class="value">{{ detail.value }}</span>
                  </div>
                </div>
              </div>
            </div>

            <!-- 实时图表 -->
            <div class="realtime-chart cyber-card">
              <div class="chart-header">
                <div class="header-left">
                  <h3 class="cyber-title">
                    <el-icon class="pulse-icon"><DataAnalysis /></el-icon>
                    园区能耗趋势
                  </h3>
                  <div class="time-range">
                    <el-tag type="info">2024-07-15 14:00 实时更新</el-tag>
                  </div>
                </div>
                <div class="header-tools">
                  <el-button type="cyber" size="small" icon="Refresh" circle @click="refreshData" />
                  <el-dropdown trigger="click">
                    <el-button type="cyber" size="small" icon="Timer" circle />
                    <template #dropdown>
                      <el-dropdown-menu>
                        <el-dropdown-item @click="setTimeRange('realtime')">实时数据</el-dropdown-item>
                        <el-dropdown-item @click="setTimeRange('day')">日视图</el-dropdown-item>
                        <el-dropdown-item @click="setTimeRange('week')">周视图</el-dropdown-item>
                      </el-dropdown-menu>
                    </template>
                  </el-dropdown>
                </div>
              </div>

              <div class="chart-container">
                <!-- 主图表区 -->
                <div class="main-chart" ref="chart"></div>
                
                <!-- 数据叠加层 -->
                <div class="data-overlay">
                  <!-- 当前值指示器 -->
                  <div class="current-indicator" :style="indicatorStyle">
                    <div class="value">{{ currentValue }}<span class="unit">kW</span></div>
                    <div class="time">{{ currentTime }}</div>
                  </div>
                  
                  <!-- 动态图例 -->
                  <div class="dynamic-legend">
                    <div v-for="(item, index) in legendData" :key="index" class="legend-item">
                      <div class="color-tag" :style="{background: item.color}"></div>
                      <div class="label">{{ item.label }}</div>
                      <div class="value">{{ item.value }}kW</div>
                    </div>
                  </div>
                </div>
              </div>

              <!-- 底部统计栏 -->
              <div class="stats-bar">
                <div class="stat-item" v-for="stat in quickStats" :key="stat.label">
                  <div class="label">{{ stat.label }}</div>
                  <div class="value-group">
                    <span class="value" :style="{color: stat.color}">{{ stat.value }}</span>
                    <el-icon :class="stat.trend" v-if="stat.trend">
                      <Top v-if="stat.trend === 'up'" />
                      <Bottom v-else />
                    </el-icon>
                  </div>
                </div>
              </div>
            </div>

            <!-- 设备状态 -->
            <div class="device-status cyber-card">
              <h3 class="cyber-title">设备健康监测</h3>
              <div class="status-overview">
                <div 
                  v-for="(status, key) in deviceStatus" 
                  :key="key" 
                  class="status-item"
                  :class="`status-${key}`"
                >
                  <div class="label">{{ statusLabels[key] }}</div>
                  <div class="count">{{ status }}</div>
                </div>
              </div>
            </div>

            <!-- 告警时间线 -->
            <div class="cyber-card">
              <h3 class="cyber-title">实时安全告警</h3>
              <div class="alert-timeline">
                <div v-for="(alert, index) in alerts" :key="index" class="timeline-item">
                  <div class="alert-header">
                    <span class="time">{{ alert.time }}</span>
                    <el-tag :type="alert.level === '紧急' ? 'danger' : 'warning'" size="small">
                      {{ alert.level }}
                    </el-tag>
                  </div>
                  <div class="alert-content">
                    {{ alert.type }} - {{ alert.location }}
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 路由视图 -->
          <router-view v-slot="{ Component }">
            <transition name="cyber-fade">
              <keep-alive>
                <component :is="Component" />
              </keep-alive>
            </transition>
          </router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import UserPanel from '@/components/UserPanel.vue'
import { useUserStore } from '@/stores/user'
import { computed, ref } from 'vue'
import { asyncRoutes } from '@/router/index.js'
import { useRoute, useRouter } from 'vue-router'

const userStore = useUserStore()
const router = useRouter()
const route = useRoute()

// 根据权限过滤可访问路由
const accessibleRoutes = computed(() => {
  return asyncRoutes.filter(route => 
    !route.meta.hidden && hasPermission(userStore.roles, route)
  )
})

// 假数据
const fakeStats = ref([
  { label: '在岗人员', value: '1,234', trend: 'up', trendValue: '+5.6%' },
  { label: '设备在线', value: '98%', trend: 'stable', trendValue: '±0.2%' },
  { label: '能耗指数', value: '326kW', trend: 'down', trendValue: '-12%' },
  { label: '安全评分', value: '98.6', trend: 'up', trendValue: '+2.4' }
])

const fakeAlerts = ref([
  { time: '08:45', type: '异常入侵', location: 'A区3号楼' },
  { time: '09:12', type: '设备离线', location: '配电室#2' },
  { time: '10:03', type: '温度超标', location: '数据中心' }
])

// 增强后的标签数据
const enhancedTabs = ref([
  { 
    path: '/overview', 
    title: '总览看板',
    icon: 'DataAnalysis',
    component: 'OverviewView'
  },
  { 
    path: '/access', 
    title: '通行监控',
    icon: 'TrendCharts',
    component: 'AccessView'
  },
  { 
    path: '/security', 
    title: '安防中枢', 
    icon: 'Monitor',
    component: 'SecurityView'
  },
  { 
    path: '/property', 
    title: '空间管理',
    icon: 'OfficeBuilding',
    component: 'PropertyView'
  },
  {
    path: '/control',
    title: '设备控制',
    icon: 'Setting',
    component: 'ControlView'
  }
])

// 新增假数据
const fakeDevices = ref([
  { name: '智能门禁', status: '正常', icon: 'Lock', value: 98 },
  { name: '消防系统', status: '警告', icon: 'Warning', value: 65 },
  { name: '电梯控制', status: '正常', icon: 'CaretTop', value: 100 },
  { name: '能源监测', status: '正常', icon: 'Lightning', value: 89 }
])

// 标签切换方法
const switchTab = (tab) => {
  router.push(tab.path)
}

// 判断当前激活标签
const isActiveTab = (path) => {
  return route.path.startsWith(path)
}

// 增强虚拟数据
const coreMetrics = ref([
  { 
    label: '设备总数', 
    value: '2,345', 
    trend: '+5%', 
    icon: 'Cpu',
    color: '#6c5ce7',
    detail: [
      { name: '在线设备', value: '2,301' },
      { name: '离线设备', value: '44' }
    ]
  },
  { 
    label: '能源效率', 
    value: '86%', 
    trend: '↑3.2%', 
    icon: 'Lightning',
    color: '#00f7ff',
    detail: [
      { name: '总能耗', value: '56,789 kW' },
      { name: '节能率', value: '12%' }
    ]
  },
  { 
    label: '安全指数', 
    value: '98.6', 
    trend: '稳定', 
    icon: 'Lock',
    color: '#ff0066',
    detail: [
      { name: '今日告警', value: '3' },
      { name: '处理中', value: '1' }
    ]
  },
  { 
    label: '环境质量', 
    value: '优', 
    trend: 'PM2.5 12', 
    icon: 'Sunny',
    color: '#ffd700',
    detail: [
      { name: '温度', value: '26℃' },
      { name: '湿度', value: '58%' }
    ]
  }
])

const deviceStatus = ref({
  total: 2345,
  online: 2301,
  offline: 44,
  warning: 12
})

const alerts = ref([
  { time: '14:23', type: '温度超标', location: '数据中心#3', level: '紧急' },
  { time: '13:45', type: '门禁异常', location: 'A区入口', level: '警告' },
  { time: '12:10', type: '电力中断', location: '配电室#2', level: '严重' }
])

// 添加单位处理
const getUnit = (label) => {
  const units = {
    '设备总数': '台',
    '在线率': '%',
    '今日能耗': 'kW·h',
    '安全事件': '起'
  }
  return units[label] || '';
}

// 设备状态标签
const statusLabels = {
  total: '总设备数',
  online: '在线设备',
  offline: '异常设备',
  warning: '预警设备'
}

// 新增能耗虚拟数据
const energyData = ref({
  xAxis: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '24:00'],
  series: [
    {
      name: '电力消耗',
      type: 'line',
      data: [320, 280, 400, 680, 750, 820, 450],
      smooth: true,
      symbol: 'none'
    },
    {
      name: '新能源供电',
      type: 'line',
      data: [80, 100, 150, 200, 300, 250, 180],
      smooth: true,
      symbol: 'none'
    }
  ]
})

// 新增能耗统计指标
const energyStats = ref([
  {
    title: '总能耗',
    value: '56,789',
    unit: 'kW·h',
    icon: 'Lightning',
    trend: '+5.6%',
    color: '#00f7ff'
  },
  {
    title: '节能率',
    value: '23%',
    unit: '同比',
    icon: 'Opportunity',
    trend: '↑2.1%',
    color: '#6c5ce7'
  },
  {
    title: '峰谷差',
    value: '1.8',
    unit: '倍率',
    icon: 'PieChart',
    trend: '优化中',
    color: '#ffd700'
  }
])

// 初始化图表
import * as echarts from 'echarts'
import { onMounted, onUnmounted } from 'vue'

let energyChart = null
onMounted(() => {
  energyChart = echarts.init(document.querySelector('.chart-container'))
  
  const option = {
    backgroundColor: 'transparent',
    tooltip: {
      trigger: 'axis',
      backgroundColor: 'rgba(0, 20, 40, 0.9)',
      borderColor: '#00f7ff',
      textStyle: {
        color: '#00f7ff',
        fontFamily: 'Orbitron'
      }
    },
    xAxis: {
      type: 'category',
      data: energyData.value.xAxis,
      axisLine: {
        lineStyle: {
          color: '#409EFF'
        }
      },
      axisLabel: {
        color: '#7f95b4',
        fontSize: 12
      }
    },
    yAxis: {
      type: 'value',
      splitLine: {
        lineStyle: {
          color: 'rgba(64, 158, 255, 0.1)'
        }
      },
      axisLine: {
        show: false
      },
      axisLabel: {
        color: '#7f95b4',
        fontSize: 12
      }
    },
    series: energyData.value.series.map(item => ({
      ...item,
      lineStyle: {
        width: 3,
        shadowBlur: 10,
        shadowColor: '#00f7ff'
      },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: 'rgba(0, 247, 255, 0.3)' },
          { offset: 1, color: 'rgba(0, 247, 255, 0)' }
        ])
      },
      itemStyle: {
        color: '#00f7ff'
      }
    }))
  }

  energyChart.setOption(option)
  
  // 窗口resize监听
  window.addEventListener('resize', () => energyChart.resize())
})

onUnmounted(() => {
  if (energyChart) {
    window.removeEventListener('resize', () => energyChart.resize())
    energyChart.dispose()
  }
})
</script>

<style scoped lang="scss">
// 统一深空蓝主题
$space-blue: #0a1633;
$cyber-blue: #409EFF;
$neon-purple: #6c5ce7;
$text-primary: #e6f7ff;
$text-secondary: #7f95b4;

// 增强科幻视觉效果
$cyber-glow: 0 0 15px rgba(64, 158, 255, 0.3);

// 全息投影效果
@keyframes hologram-pulse {
  0% { opacity: 0.8; }
  50% { opacity: 1; filter: brightness(1.2); }
  100% { opacity: 0.8; }
}

.main-layout {
  background: $space-blue;
  color: $text-primary;
  min-height: 100%;

  // 动态粒子背景
  &::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
      radial-gradient(circle at 50% 50%, 
        rgba($cyber-blue, 0.1) 0%, 
        rgba($space-blue, 0) 100%),
      url('~@/assets/grid-pattern.png');
    z-index: 0;
  }

  .sci-fi-container {
    flex: 1;
    display: flex;
    min-width: 100%; // 保证最小显示宽度
  }

  .cyber-aside {
    width: 280px !important; // 适当加宽侧边栏
    background: rgba(16, 24, 48, 0.95) !important;
    border-right: 1px solid rgba(0, 247, 255, 0.15);
    display: flex;
    flex-direction: column;
    padding: 20px 0;
  }

  .main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0; // 修复flex布局溢出问题
  }

  .cyber-header {
    height: 80px !important; // 加高头部
    padding: 0 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(0, 20, 40, 0.9);

    .dashboard-tabs {
      flex: 1;
      display: flex;
      gap: 30px;
      margin-right: 40px;

      .cyber-tag {
        padding: 0 30px;
        height: 50px;
        line-height: 50px;
        font-size: 18px;
        border-radius: 25px;
      }
    }
  }

  .hologram-main {
    flex: 1;
    padding: 30px;
    overflow: auto;
    background: rgba(0, 20, 40, 0.9);

    .dashboard-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
      gap: 30px;
      max-width: 1800px;
      margin: 0 auto;
    }

    .cyber-card {
      min-height: 300px;
      padding: 30px;
      box-shadow: 0 0 30px rgba(0, 247, 255, 0.1);

      &::before {
        padding: 3px;
      }
    }

    .stats-container {
      grid-template-columns: repeat(4, 1fr);
      gap: 30px;
      padding: 20px 0;

      .stat-item {
        padding: 30px;
        min-height: 150px;

        .stat-value {
          font-size: 36px;
          margin: 15px 0;
        }
      }
    }

    .map-preview {
      grid-column: span 2;
      height: 500px;
    }

    .alert-panel {
      grid-column: span 2;
      min-height: 400px;

      .alert-list {
        margin-top: 20px;

        .alert-item {
          padding: 20px;
          margin: 15px 0;
          background: rgba(255,0,0,0.05);
          border-left: 4px solid #ff0066;
        }
      }
    }
  }
}

.cyber-logo {
  height: 100px;
  padding: 0 25px;
  margin-bottom: 30px;
  display: flex;
  align-items: center;
  position: relative;
  
  .hologram-logo {
    width: 45px;
    height: 45px;
    margin-right: 15px;
    filter: drop-shadow(0 0 10px rgba(0, 247, 255, 0.5));
  }
  
  .cyber-text {
    font-size: 20px;
    letter-spacing: 2px;
    opacity: 0.9;
  }
  
  .glowing-line {
    position: absolute;
    bottom: -15px;
    left: 25px;
    right: 25px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 247, 255, 0.4), transparent);
  }
}

.cyber-menu {
  flex: 1;
  padding: 0 15px;
  overflow-y: auto;
  
  .cyber-menu-item {
    height: 60px !important;
    margin: 12px 0 !important;
    padding: 0 20px !important;
    border-radius: 8px;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    
    .menu-icon {
      font-size: 22px !important;
      margin-right: 18px;
      flex-shrink: 0;
    }
    
    .menu-text {
      font-size: 16px;
      letter-spacing: 1px;
      opacity: 0.9;
    }
    
    .cyber-border {
      position: absolute;
      inset: 0;
      border: 1px solid rgba(0, 247, 255, 0.3);
      border-radius: 8px;
      opacity: 0;
      transition: opacity 0.3s;
    }
    
    &:hover {
      transform: translateX(10px);
      .cyber-border {
        opacity: 1;
      }
    }
    
    &.is-active {
      background: linear-gradient(90deg, rgba(0, 247, 255, 0.1), transparent);
      .cyber-border {
        opacity: 1;
        border-color: #00f7ff;
      }
    }
  }
}

// 响应式调整
@media (max-width: 1600px) {
  .hologram-main {
    padding: 20px;
    
    .dashboard-grid {
      grid-template-columns: 1fr;
    }
    
    .map-preview,
    .alert-panel {
      grid-column: span 1;
    }
  }
}

// 新增样式
.device-status {
  .device-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    padding: 20px;
    
    .device-item {
      display: flex;
      align-items: center;
      padding: 20px;
      background: rgba(255,255,255,0.05);
      border-radius: 8px;
      
      .el-icon {
        font-size: 28px;
        margin-right: 15px;
      }
      
      .device-info {
        line-height: 1.4;
        
        .device-name {
          font-size: 16px;
          color: #c0e6ff;
        }
        
        .device-status {
          font-size: 14px;
          color: #7f95b4;
        }
      }
    }
  }
}

// 标签栏增强样式
.cyber-tag {
  height: 40px !important;
  padding: 0 20px !important;
  border-radius: 20px !important; // 大圆角
  border: none !important;
  background: linear-gradient(135deg, #409EFF, #6c5ce7) !important;
  color: white !important;
  transition: all 0.3s !important;
  margin-right: 12px !important;

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(64, 158, 255, 0.3);
  }

  &.is-active {
    background: linear-gradient(135deg, #ff6b6b, #ff0066) !important;
  }
}

// 路由切换动画
.cyber-fade-enter-active,
.cyber-fade-leave-active {
  transition: opacity 0.3s, transform 0.3s;
}
.cyber-fade-enter-from {
  opacity: 0;
  transform: translateY(20px);
}
.cyber-fade-leave-to {
  opacity: 0;
  transform: translateY(-20px);
}

// 增强数据展示
.dashboard-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

  // 核心指标卡片
  .core-metrics {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    padding: 20px;
    background: rgba(16, 24, 48, 0.6);
    border-radius: 12px;
    position: relative;
    overflow: hidden;

    .metric-item {
      padding: 25px;
      position: relative;
      border: 1px solid;
      border-image: linear-gradient(145deg, currentColor, transparent) 1;
      box-shadow: 0 0 20px rgba(0, 247, 255, 0.1);
      
      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(
          145deg,
          rgba(255,255,255,0.05),
          transparent
        );
        z-index: 0;
      }

      .metric-header {
        display: flex;
        align-items: center;
        margin-bottom: 15px;

        .el-icon {
          font-size: 28px;
          margin-right: 15px;
          filter: drop-shadow(0 0 8px currentColor);
        }

        .title-group {
          flex: 1;
          
          .main-value {
            font-size: 32px;
            line-height: 1;
            margin-bottom: 5px;
            font-family: 'Orbitron';
          }
          
          .metric-label {
            font-size: 16px;
            color: #7f95b4;
          }
        }
      }

      .trend-indicator {
        position: absolute;
        top: 20px;
        right: 20px;
        font-size: 14px;
        padding: 5px 10px;
        border-radius: 15px;
        background: rgba(255,255,255,0.1);
      }

      .detail-list {
        border-top: 1px solid rgba(255,255,255,0.1);
        padding-top: 15px;
        margin-top: 15px;

        .detail-item {
          display: flex;
          justify-content: space-between;
          margin: 8px 0;
          font-size: 14px;

          .name {
            color: #7f95b4;
          }

          .value {
            color: #00f7ff;
            font-family: 'Orbitron';
          }
        }
      }
    }
  }

  // 实时数据图表
  .realtime-chart {
    height: 420px;
    display: flex;
    flex-direction: column;
    background: rgba(16, 24, 48, 0.8);
    border: 1px solid rgba(0, 247, 255, 0.15);
    border-radius: 8px;
    overflow: hidden;

    .chart-header {
      padding: 12px 15px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid rgba(0, 247, 255, 0.1);

      .header-left {
        display: flex;
        align-items: center;
        gap: 10px;

        .cyber-title {
          margin: 0;
          font-size: 16px;
          display: flex;
          align-items: center;
          
          .pulse-icon {
            color: #00f7ff;
            margin-right: 8px;
            animation: pulse 1.5s infinite;
          }
        }
      }

      .header-tools {
        display: flex;
        gap: 8px;
      }
    }

    .chart-container {
      flex: 1;
      position: relative;
      
      .main-chart {
        width: 100%;
        height: 100%;
      }

      .data-overlay {
        position: absolute;
        top: 15px;
        left: 15px;
        right: 15px;
        bottom: 15px;
        pointer-events: none;

        .current-indicator {
          position: absolute;
          background: rgba(0, 20, 40, 0.9);
          padding: 8px 12px;
          border-radius: 4px;
          border-left: 3px solid #00f7ff;
          
          .value {
            font-family: 'DS-Digital', sans-serif;
            font-size: 24px;
            color: #00f7ff;
            
            .unit {
              font-size: 12px;
              margin-left: 4px;
            }
          }
          
          .time {
            font-size: 12px;
            color: #7f95b4;
          }
        }

        .dynamic-legend {
          position: absolute;
          bottom: 0;
          right: 0;
          background: rgba(0, 20, 40, 0.8);
          padding: 8px;
          border-radius: 4px;
          
          .legend-item {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 4px 0;
            
            .color-tag {
              width: 12px;
              height: 12px;
              border-radius: 2px;
            }
            
            .label {
              font-size: 12px;
              color: #7f95b4;
            }
            
            .value {
              font-size: 12px;
              color: #00f7ff;
            }
          }
        }
      }
    }

    .stats-bar {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      border-top: 1px solid rgba(0, 247, 255, 0.1);
      padding: 8px;
      
      .stat-item {
        padding: 8px;
        text-align: center;
        
        .label {
          font-size: 12px;
          color: #7f95b4;
          margin-bottom: 4px;
        }
        
        .value-group {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 4px;
          
          .value {
            font-family: 'DS-Digital', sans-serif;
            font-size: 16px;
          }
          
          .el-icon {
            font-size: 12px;
            
            &.up { color: #00ff88; }
            &.down { color: #ff0066; }
          }
        }
      }
    }
  }
}

@keyframes pulse {
  0% { opacity: 0.6; }
  50% { opacity: 1; }
  100% { opacity: 0.6; }
}

@keyframes flow {
  0% { background-position: -100% 0; }
  100% { background-position: 100% 0; }
}

@keyframes scan {
  0% { background-position: 0 0; }
  100% { background-position: 4px 4px; }
}

// 设备状态面板
.device-status {
  .status-overview {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    
    .status-item {
      position: relative;
      padding: 20px;
      border-radius: 8px;
      background: linear-gradient(
        145deg,
        rgba(0,0,0,0.3),
        rgba(64,158,255,0.1)
      );
      
      .count {
        font-size: 28px;
        position: relative;
        &::before {
          content: '';
          position: absolute;
          bottom: -5px;
          left: 0;
          width: 30%;
          height: 2px;
          background: $cyber-blue;
          box-shadow: $cyber-glow;
        }
      }
    }
  }
}

// 告警时间线
.alert-timeline {
  position: relative;
  &::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(
      to bottom,
      transparent,
      $cyber-blue,
      transparent
    );
  }
  
  .timeline-item {
    position: relative;
    padding-left: 30px;
    margin-left: 10px;
    
    &::before {
      content: '';
      position: absolute;
      left: -6px;
      top: 20px;
      width: 12px;
      height: 12px;
      background: #ff0066;
      border-radius: 50%;
      box-shadow: 0 0 10px #ff0066;
    }
    
    &::after {
      content: '';
      position: absolute;
      left: -1px;
      top: 25px;
      bottom: -10px;
      width: 2px;
      background: linear-gradient(
        to bottom,
        #ff0066,
        transparent
      );
    }
  }
}

// 添加科幻HUD效果
@keyframes hud-glitch {
  0% { clip-path: inset(10% 0 90% 0); }
  20% { clip-path: inset(30% 0 1% 0); }
  60% { clip-path: inset(10% 0 50% 0); }
  100% { clip-path: inset(80% 0 1% 0); }
}

.hud-effect {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background: linear-gradient(
    0deg,
    rgba(64,158,255,0.05) 0%,
    transparent 50%,
    rgba(64,158,255,0.05) 100%
  );
  animation: hud-glitch 0.5s infinite;
  mix-blend-mode: screen;
  z-index: 999;
}

// 统一字体风格
body {
  font-family: 'Orbitron', -apple-system, BlinkMacSystemFont, 
               "Segoe UI", Roboto, "Helvetica Neue", 
               Arial, sans-serif;
  line-height: 1.6;
}

// 浏览器兼容处理
.cyber-card {
  -webkit-backdrop-filter: blur(5px);
  -moz-backdrop-filter: blur(5px);
  
  @supports not (backdrop-filter: blur(5px)) {
    background: rgba(#000, 0.5);
  }
}

// 新增文字发光动画
@keyframes text-glow {
  0% { text-shadow: 0 0 10px rgba(0,247,255,0.5); }
  50% { text-shadow: 0 0 20px rgba(0,247,255,0.8); }
  100% { text-shadow: 0 0 10px rgba(0,247,255,0.5); }
}

// 增强背景效果
.cyber-card {
  background: linear-gradient(
    145deg,
    rgba(10, 22, 51, 0.95),
    rgba(0, 8, 26, 0.9)
  );
  
  &::before {
    background: linear-gradient(
      45deg,
      rgba(64, 158, 255, 0.05) 25%,
      transparent 25%,
      transparent 50%,
      rgba(108, 92, 231, 0.05) 50%,
      rgba(108, 92, 231, 0.05) 75%,
      transparent 75%
    );
  }
  
  &::after {
    background: radial-gradient(
      circle at 50% 50%,
      rgba(108, 92, 231, 0.1),
      transparent 70%
    );
  }
}

// 新增动态边框
@keyframes border-glow {
  0% { border-color: rgba(0,247,255,0.3); }
  50% { border-color: rgba(108,92,231,0.6); }
  100% { border-color: rgba(0,247,255,0.3); }
}

.metric-item {
  animation: border-glow 3s infinite;
}

// 核心指标科幻效果
.core-metrics {
  .metric-item {
    background: linear-gradient(
      145deg,
      rgba(16, 24, 48, 0.9),
      rgba(0, 0, 40, 0.7)
    );
    border: 1px solid rgba(0, 247, 255, 0.3);
    box-shadow: 0 0 20px rgba(0, 247, 255, 0.1);
    
    &::after {
      background: linear-gradient(90deg, 
        transparent, 
        rgba(0, 247, 255, 0.6),
        transparent);
      animation: flow 2s infinite;
    }
    
    .value {
      color: #6c5ce7;
      text-shadow: 0 0 15px rgba(108, 92, 231, 0.5);
      font-family: 'Orbitron', sans-serif;
      &::after {
        color: #00f7ff;
        text-shadow: 0 0 8px rgba(0, 247, 255, 0.4);
      }
    }
    
    .label {
      color: #00f7ff;
      text-shadow: 0 0 10px rgba(0, 247, 255, 0.3);
      letter-spacing: 1px;
    }
  }
}

// 设备状态科幻效果
.device-status {
  .status-item {
    background: linear-gradient(
      145deg,
      rgba(16, 24, 48, 0.8),
      rgba(0, 0, 0, 0.6)
    );
    border: 1px solid rgba(64, 158, 255, 0.2);
    position: relative;
    
    &::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 3px;
      height: 100%;
      background: linear-gradient(
        to bottom,
        transparent,
        #409EFF,
        transparent
      );
      box-shadow: 0 0 10px #409EFF;
    }
    
    .count {
      color: #409EFF;
      text-shadow: 0 0 10px rgba(64, 158, 255, 0.3);
    }
  }
}

// 告警时间线科幻效果
.alert-timeline {
  &::before {
    background: linear-gradient(
      to bottom,
      transparent,
      #ff0066,
      transparent
    );
    box-shadow: 0 0 10px rgba(255, 0, 102, 0.3);
  }
  
  .timeline-item {
    background: linear-gradient(
      145deg,
      rgba(16, 24, 48, 0.8),
      rgba(0, 0, 0, 0.6)
    );
    border: 1px solid rgba(255, 0, 102, 0.3);
    
    &::before {
      background: #ff0066;
      box-shadow: 0 0 15px #ff0066;
    }
  }
}

// 添加动态数字背景
@keyframes digital-fall {
  0% { background-position: 0 0; }
  100% { background-position: 0 100vh; }
}

.digital-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('~@/assets/digital-rain.png');
  opacity: 0.05;
  animation: digital-fall 20s linear infinite;
  z-index: -1;
  mix-blend-mode: screen;
}

.metric-item {
  transition: all 0.3s;
  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 0 30px rgba(0, 247, 255, 0.2);
  }
}

.cyber-user-panel {
  .cyber-profile {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 8px 15px;
    background: rgba(16, 24, 48, 0.8);
    border: 1px solid rgba(0, 247, 255, 0.3);
    border-radius: 30px;
    position: relative;
    transition: all 0.3s;
    
    &:hover {
      box-shadow: 0 0 15px rgba(0, 247, 255, 0.3);
      
      .hologram-effect {
        opacity: 0.8;
      }
    }
    
    .hologram-avatar {
      width: 40px;
      height: 40px;
      position: relative;
      
      .avatar-img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        position: relative;
        z-index: 2;
      }
      
      .hologram-effect {
        position: absolute;
        top: -2px;
        left: -2px;
        right: -2px;
        bottom: -2px;
        background: linear-gradient(45deg, 
          rgba(0, 247, 255, 0.3),
          rgba(0, 255, 136, 0.3),
          transparent 60%
        );
        border-radius: 50%;
        animation: rotateHalo 6s linear infinite;
        opacity: 0.5;
      }
    }
    
    .user-info {
      .username {
        font-family: 'Orbitron', sans-serif;
        letter-spacing: 1px;
        color: #00f7ff;
      }
      
      .user-status {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 12px;
        
        .status-dot {
          width: 8px;
          height: 8px;
          border-radius: 50%;
          background: #00ff88;
          box-shadow: 0 0 8px #00ff88;
        }
        
        .status-text {
          color: #7f95b4;
        }
      }
    }
    
    .cyber-menu-trigger {
      padding: 8px;
      cursor: pointer;
      transition: all 0.3s;
      
      &:hover {
        transform: rotate(90deg);
      }
    }
  }
}

@keyframes rotateHalo {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

// 自定义滚动条样式
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: rgba(16, 24, 48, 0.6);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, #409EFF, #6c5ce7);
  border-radius: 4px;
  
  &:hover {
    background: linear-gradient(to bottom, #00f7ff, #409EFF);
  }
}

// 确保内容区可滚动
.hologram-main {
  overflow-y: auto;
  height: 100%;
}

// 保持卡片内容可滚动
.cyber-card {
  .card-content {
    overflow-y: auto;
    max-height: 100%;
  }
}
</style> 